Skip to content

Add aria-labelledby to Console Config settings controls#265207

Merged
alexwizp merged 9 commits intomainfrom
copilot/fix-missing-titles-announcements
Apr 29, 2026
Merged

Add aria-labelledby to Console Config settings controls#265207
alexwizp merged 9 commits intomainfrom
copilot/fix-missing-titles-announcements

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 23, 2026

Closes: #264630

Switch buttons and the font size field on the Dev Tools Console Config page lack accessible names, causing screen readers to announce them without context (e.g. "On, on, switch" instead of "Save requests to history, switch"). Violates WCAG 4.1.2 Name, Role, Value (Level A).

Changes

  • Add optional id prop to SettingsFormRow and set it on the label element, making it referenceable via aria-labelledby
  • For all 7 EuiSwitch components (history, keyboard shortcuts, a11y overlay, wrap lines, triple quotes, and 4 autocomplete toggles): set aria-labelledby referencing the row label, showLabel={false}, and label=""
  • For the EuiFieldNumber (font size): set aria-labelledby referencing the row label
  • Remove unused ON_LABEL/OFF_LABEL i18n constants
<SettingsFormRow
  id="saveRequestsToHistory-label"
  label={i18n.translate('console.settingsPage.saveRequestsToHistoryLabel', {
    defaultMessage: 'Save requests to history',
  })}
>
  <EuiSwitch
    checked={isHistoryEnabled}
    showLabel={false}
    label=""
    aria-labelledby="saveRequestsToHistory-label"
    onChange={(e) => toggleSavingToHistory(e.target.checked)}
  />
</SettingsFormRow>

Screen readers now announce the setting name from the visible row label via aria-labelledby, rather than relying on a separate hidden aria-label or the "On"/"Off" toggle text.

…g page

Add aria-label attributes to all EuiSwitch components and the EuiFieldNumber
on the Console settings page so that screen readers announce the setting names
along with the control state.

Fixes accessibility issue where switches were announced as "On, on, switch"
without the corresponding setting name, and the font size field was announced
without its label.

WCAG 4.1.2: Name, Role, Value (Level A)

Agent-Logs-Url: https://github.com/elastic/kibana/sessions/588ad37a-5f2c-46c7-bca2-c43f74d5ac17

Co-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix missing titles in dialog modals and flyouts Add aria-labels to Console Config settings controls Apr 23, 2026
Copilot AI requested a review from alexwizp April 23, 2026 08:37
Copy link
Copy Markdown
Contributor

@alexwizp alexwizp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot you need to do the following:

  • set id for SettingsFormRow labels
  • for EuiSwitch:
    1. set aria-labelledby attrribute
    2. set showLabel to false.
    3. remove label prop

…-label

Per review feedback: add id to SettingsFormRow labels and use
aria-labelledby on EuiSwitch/EuiFieldNumber to reference the visible
label. Set showLabel={false} and remove label prop on all switches.
Remove unused ON_LABEL/OFF_LABEL constants.

Agent-Logs-Url: https://github.com/elastic/kibana/sessions/15cf4601-88f1-4dde-b0ad-143613bdc7ed

Co-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Apr 23, 2026

@copilot you need to do the following:

  • set id for SettingsFormRow labels
  • for EuiSwitch:...

Done in 74a5be5. Changed approach to:

  • Added optional id prop to SettingsFormRow and set it on the label element
  • For all EuiSwitch components: set aria-labelledby referencing the row label id, showLabel={false}, and label="" (required by EUI's type definition)
  • For EuiFieldNumber (font size): set aria-labelledby referencing the row label id
  • Removed unused ON_LABEL/OFF_LABEL constants

Copilot AI changed the title Add aria-labels to Console Config settings controls Add aria-labelledby to Console Config settings controls Apr 23, 2026
Copilot AI requested a review from alexwizp April 23, 2026 08:51
@alexwizp alexwizp marked this pull request as ready for review April 24, 2026 09:35
@alexwizp alexwizp requested a review from a team as a code owner April 24, 2026 09:35
Copy link
Copy Markdown
Contributor

@alexwizp alexwizp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested locally

@alexwizp alexwizp added Project:Accessibility release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting v9.4.0 v9.5.0 v9.3.4 labels Apr 24, 2026
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/kibana-accessibility (Project:Accessibility)

@alexwizp alexwizp added the a11y:agent-pr PR has been created by the agent label Apr 24, 2026
@alexwizp
Copy link
Copy Markdown
Contributor

/ci

@alexwizp
Copy link
Copy Markdown
Contributor

/ci

@elastic elastic deleted a comment from elasticmachine Apr 24, 2026
@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Apr 24, 2026

⏳ Build in-progress, with failures

Failed CI Steps

Test Failures

  • [job] [logs] affected Scout: [ observability / observability ] plugin / local-serverless-observability_complete - Observability Landing Page - redirects to page specified in defaultRoute uiSetting
  • [job] [logs] affected Scout: [ observability / observability ] plugin / local-serverless-observability_complete - Observability Landing Page - redirects to page specified in defaultRoute uiSetting
  • [job] [logs] affected Scout: [ observability / apm ] plugin / local-serverless-observability_complete - Service map - accessibility - focus management and visible indicators work correctly
  • [job] [logs] Jest Integration Tests #8 / step level timeout should have execution duration close to configured timeout value

History

cc @alexwizp @Copilot

Copy link
Copy Markdown
Contributor

@ElenaStoeva ElenaStoeva left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this @alexwizp. I tested locally and now the switches are announced correctly. However, these changes also cause changes in the UI: because we removed the labels, they are no longer displayed next to the switches. Is there a reason why they were removed? If not, we should put them back.

Before:

Image

Now:

Image

@alexwizp
Copy link
Copy Markdown
Contributor

@ElenaStoeva yes, it was done one purpose, normally we don't need to do that

@alexwizp
Copy link
Copy Markdown
Contributor

@elastic/eui-team could you please confirm that ^^^^

@ElenaStoeva
Copy link
Copy Markdown
Contributor

@ElenaStoeva yes, it was done one purpose, normally we don't need to do that

I see, let's also check with @EdLewisEL and @jovana-andjelkovic - do you both have any opinion on the question in #265207 (review)?

@alexwizp
Copy link
Copy Markdown
Contributor

/ci

@acstll
Copy link
Copy Markdown
Contributor

acstll commented Apr 27, 2026

@elastic/eui-team could you please confirm that ^^^^

from an "eui" point of view, i agree with the change and the "on/off" labels being removed

usage guidelines about labels suggest they be action-oriented and descriptive — with the change, labels on the left e.g. "Save requests to history" are being properly associated with each switch, making "on/off" unnecessary

but let's also wait for @EdLewisEL and @jovana-andjelkovic to confirm

@jovana-andjelkovic
Copy link
Copy Markdown
Contributor

@ElenaStoeva @alexwizp @acstll this is fine, and actually makes it more consistent! Thanks for checking ❤️

@alexwizp alexwizp requested a review from ElenaStoeva April 28, 2026 13:31
@alexwizp
Copy link
Copy Markdown
Contributor

/ci

@kibanamachine
Copy link
Copy Markdown
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] affected Scout: [ observability / apm ] plugin / local-serverless-observability_complete - Custom links template validation - Create custom link with template URL and filters

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
console 206.7KB 207.1KB +395.0B

History

cc @alexwizp @Copilot

Copy link
Copy Markdown
Contributor

@ElenaStoeva ElenaStoeva left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks all for the feedback! Since there is no objection to the UI change, I'm approving.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a11y:agent-pr PR has been created by the agent backport:skip This PR does not require backporting 💝community Project:Accessibility release_note:skip Skip the PR/issue when compiling release notes v9.3.4 v9.4.0 v9.5.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Platform:Management:Dev Tools] Elements missing title from announcement

7 participants